<template>
  <div class="main">
    <div class="form-group">
      <input
        type="text"
        v-model="restaurant_name"
        placeholder="餐厅名称"
        class="form-control"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        v-model="address"
        placeholder="餐厅地址"
        class="form-control"
      />
    </div>
    <div class="form-group">
      <input
        type="text"
        v-model="contact_number"
        placeholder="联系方式"
        class="form-control"
      />
    </div>
    <div class="form-group">
      <input type="file" @change="handleFileChange" class="form-control-file" />
    </div>
    <div class="form-group">
      <button @click="uploadImage" class="btn btn-primary">上传</button>
      <button @click="goback" class="btn btn-primary" style="margin-left: 20px">
        返回
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { addRestaurantApi } from "@/utils/api";

const restaurant_name = ref("");
const address = ref("");
const contact_number = ref("");
let selectedFile = null;

const handleFileChange = (e) => {
  selectedFile = e.target.files[0];
};

const uploadImage = async () => {
  const formData = new FormData();
  formData.append("restaurant_name", restaurant_name.value);
  formData.append("address", address.value);
  formData.append("contact_number", contact_number.value);
  formData.append("image", selectedFile);
  console.log(formData);

  const response = await addRestaurantApi(formData);
};

// 返回上一页
const goback = () => {
  window.history.back();
};
</script>

<style lang="less" scoped>
.form-group {
  margin-bottom: 20px;
}

.form-control {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-control-file {
  width: 100%;
  padding: 8px;
  font-size: 16px;
}

.btn {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-primary:active {
  background-color: #0056b3;
}
</style>
